<template>
  <div v-loading.fullscreen.lock="loadding" flex>
    <div class="flex_1 border_right padding_right_10">
      <!-- <div>表单</div> -->
      <avue-form ref="form" v-model="obj" :option="option" @submit="handleSubmit">
        <!-- <template slot="menuForm" slot-scope="scope">
          <el-button @click="tip">生成PDF文件</el-button>
        </template> -->
        <template slot="yhxxsHeader" slot-scope="{column}">
          <div class="avue-group__header">
            <i :class="column.icon" class="avue-group__icon" />

            <h1 class="avue-group__title">{{ column.label }}</h1>

            <el-upload
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              :before-upload="()=>loadding=true"
              :on-success="handleOnSuccess">
              <el-button size="mini" type="success" plain style="margin-left:8px">上传身份证图片</el-button>
            </el-upload>

            <!-- <el-button size="mini" type="success" plain style="margin-left:8px" @click.stop="photograph">拍照</el-button> -->

          </div>

        </template>

        <template slot="reInquirytorSignature" slot-scope="scope">
          <div flex="cross:center main:justify">
            <img class="flex_1 " :src="scope.value" alt="" height="32">
            <el-link class="margin_left_10" type="primary" @click="dialogVisible = true">签名</el-link>
          </div>

        </template>
        <template slot="imgUrlType" slot-scope="{file}">
          <!-- <span>自定义卡槽{{ file }}</span> -->
          <div flex="main:justify cross:center">
            <video width="250" height="56" controls="" name="media"><source :src="file.url" type="audio/flac"></video>
            <div flex>
              <el-button plain size="mini" type="primary" @click="videoDiscern(file.url)">转文字</el-button>
              <el-button plain size="mini" type="danger" @click="handleDeleteVideo(file.uid)">删除</el-button>
            </div>
          </div>

        </template>
      </avue-form>

      <el-dialog
        title="签名"
        class="margin_top_0"
        :visible.sync="dialogVisible"
        width="650px"
        append-to-body>
        <div>
          <avue-sign ref="sign" />
          <div flex="main:right">
            <el-button @click="$refs.sign.clear()">清空</el-button>
            <el-button type="primary" @click="generate">生成</el-button>
          </div>

        </div>
      </el-dialog>

    </div>
    <div id="view_warper" class="flex_1 margin_left_10 view_warper">
      <!-- <div>预览</div> -->
      <h1 class="text_align_center">询问笔录</h1>
      <p class="text_align_right">第 <span>{{ obj.time || '--' }}</span> 次询问</p>
      <p>时间：<span>{{ parseTime(obj.startTime,"{y}年{m}月{d}日{h}时{i}分") || '--' }}</span> 至 <span>{{ parseTime(obj.endTime,"{y}年{m}月{d}日{h}时{i}分")|| '--' }}</span></p>
      <p>询问人（签名）：<span>{{ obj.inquirytorName || '--' }}</span> 工作单位：<span>{{ obj.inquirytorOrg || '--' }}</span></p>
      <p>记录人（签名）：<span>{{ obj.recordtorName || '--' }}</span> 工作单位：<span>{{ obj.recordtorOrg || '--' }}</span></p>
      <p>
        被询问人 <span>{{ obj.reInquirytorName || '--' }} </span>
        性别 <span>{{ obj.$reInquirytorSex || '--' }} </span>
        年龄 <span>{{ obj.reInquirytorAge || '--' }} </span>
        出生日期  <span>{{ parseTime(obj.reInquirytorBirth,"{y}年{m}月{d}日") || '--' }} </span>
        身份证种类  <span>{{ obj.$reInquirytorCardType || '--' }} </span>
        证件号码  <span>{{ obj.reInquirytorCardNum || '--' }} </span>
        {{ obj.reInquirytorIsNpc === "1"?'√':'□' }} 是
        {{ obj.reInquirytorIsNpc === "1"?'□':'√' }} 否
        人大代表
        现住址 <span>{{ obj.reInquirytorAddressNow || '--' }} </span>
        联系电话 <span>{{ obj.reInquirytorPhone || '--' }} </span>
        户籍所在地 <span>{{ obj.reInquirytorAddressOld || '--' }} </span>
        （<span>
          <span :style="obj.reInquirytorGoType !== '0' && 'text-decoration: line-through;'">口头传唤 </span>
          <span :style="obj.reInquirytorGoType !== '1' && 'text-decoration: line-through;'">被扭送 </span>
          <span :style="obj.reInquirytorGoType !== '2' && 'text-decoration: line-through;'">自动投案</span>
        </span>
        的被询问人
        <span>{{ parseTime(obj.reInquirytorStartTime,"{y}年{m}月{d}日{h}时{i}分") || '--' }}</span> 到达
        <span>{{ parseTime(obj.reInquirytorEndTime,"{y}年{m}月{d}日{h}时{i}分") || '--' }}</span> 离开，
        本人签名
        <img :src="obj.reInquirytorSignature" height="40" width="60" alt="" srcset="">）
        <!-- 证件号码  <span>{{ obj.reInquirytorCardNum || '--' }} </span> -->
      </p>
      <p>笔录内容</p>
      <pre>{{ obj.content }}</pre>

      <!-- <div class="" flex="dir:top cross:center" style="position: absolute;bottom: 60px;right: 20px;">
        <el-button size="mini" type="primary" plain @click="handleWindowPrint">生成文件预览</el-button>
        <el-button class="margin_top_10" type="danger" size="mini" plain @click="handleDown">生成PDF</el-button>
      </div> -->

    </div>
  </div>
</template>

<script>
const pickerOptions = {
  shortcuts: [{
    text: '今天',
    onClick(picker) {
      picker.$emit('pick', new Date())
    }
  }, {
    text: '昨天',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      picker.$emit('pick', date)
    }
  }, {
    text: '一周前',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', date)
    }
  }]
}
import { handleWindowPrint } from '@/utils/ruoyi'
import { getToken } from '@/utils/auth'
import { videoDiscern } from '@/api/archives/notice'
export default {
  data() {
    console.log(this.$route.query.token)
    const _token = this.$route.query.token
    return {
      obj: {},
      fileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/archives/notice/discern', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + (getToken() || _token)
      },
      loadding: false,
      dialogVisible: false
    }
  },
  computed: {
    option() {
      const _token = this.$route.query.token
      return {
        submitText: '保存内容',
        group: [
          {
            label: '询问人',
            prop: 'jbxx',
            icon: 'el-icon-edit-outline',
            column: [
              {
                label: '询问人',
                prop: 'inquirytorName',
                value: '薛队长'
              },
              {
                label: '询问人单位',
                prop: 'inquirytorOrg',
                value: '萧山救援大队'
              }
            ]
          }, {
            label: '记录人',
            prop: 'tksq',
            icon: 'el-icon-view',
            column: [
              {
                label: '记录人',
                prop: 'recordtorName',
                value: '梁副队长'
              },
              {
                label: '记录人单位',
                prop: 'recordtorOrg',
                value: '萧山救援大队'
              }
            ]
          },
          {
            label: '被询问人',
            prop: 'yhxxs',
            icon: 'el-icon-edit-outline',
            column: [

              {
                label: '被询问人',
                prop: 'reInquirytorName',
                value: '郝德占'
              },
              {
                label: '性别',
                prop: 'reInquirytorSex',
                type: 'select',
                dicData: [{ value: '0', label: '男' }, { value: '1', label: '女' }],
                value: '0'
              },
              {
                label: '年龄',
                prop: 'reInquirytorAge',
                value: '30'
              },
              {
                label: '出生日期',
                prop: 'reInquirytorBirth',
                type: 'date',
                value: new Date('1991/08/19')
              },
              {
                label: '证件类型',
                prop: 'reInquirytorCardType',
                type: 'select',
                dicData: [{ value: '0', label: '居民身份证' }, { value: '1', label: '外国人居留证' }],
                value: '0'
              },
              {
                label: '证件号码',
                prop: 'reInquirytorCardNum',
                value: '37082919895622738'
              },
              {
                label: '人大代表',
                prop: 'reInquirytorIsNpc',
                type: 'select',
                dicData: [{ value: '0', label: '否' }, { value: '1', label: '是' }],
                value: '0'
              },
              {
                label: '联系电话',
                prop: 'reInquirytorPhone',
                value: '19857402340'
              },
              {
                label: '现住址',
                prop: 'reInquirytorAddressNow',
                span: 24,
                value: '余杭区良渚街道亲亲家园'
              },
              {
                label: '户籍',
                prop: 'reInquirytorAddressOld',
                span: 24,
                value: '山东省济南市天桥区'
              },
              {
                label: '到达方式',
                prop: 'reInquirytorGoType',
                type: 'select',
                dicData: [{ value: '0', label: '口头传唤' }, { value: '1', label: '被扭送' }, { value: '2', label: '自动投案' }],
                value: '0'
              },
              {
                label: '到达时间',
                prop: 'reInquirytorStartTime',
                type: 'datetime',
                value: new Date(),
                pickerOptions: pickerOptions
              },
              {
                label: '离开时间',
                prop: 'reInquirytorEndTime',
                type: 'datetime',
                value: new Date(),
                pickerOptions: pickerOptions
              },
              {
                label: '本人签名',
                prop: 'reInquirytorSignature',
                value: ''
              },
              {
                label: '录音',
                prop: 'imgUrl',
                type: 'upload',
                loadText: '附件上传中，请稍等',
                span: 24,
                labelTip: '上传录音，推荐用60秒',
                action: '/common/upload',
                accept: '.amr,.mp3',

                headers: {
                  Authorization: 'Bearer ' + (getToken() || _token)
                }
              },
              {
                label: '笔录内容',
                placeholder: '上传录音后，可识别成文字',
                prop: 'content',
                span: 24,
                type: 'textarea',
                value: ''
              }
            ]
          }
        ],

        column: [
          {
            label: '询问次数',
            prop: 'time',
            span: 24,
            type: 'input-number',
            value: '2',
            controlsPosition: 'left'
          },
          {
            label: '开始时间',
            prop: 'startTime',
            type: 'datetime',
            value: new Date(),
            pickerOptions: pickerOptions
          },
          {
            label: '结束时间',
            prop: 'endTime',
            type: 'datetime',
            value: new Date(),
            pickerOptions
          },
          {
            // label: '案发地点',
            // prop: 'address',
            // span: 24,
            // value: '萧山区西兴街道智联社区香山公寓1幢1单元1206室'
            label: '案发地点',
            prop: 'address',
            type: 'map',
            span: 24,
            // 高德初始化参数
            params: {
              zoom: 10
              // zoomEnable: false,
              // dragEnable: false,
            }
          }

        ]
      }
    }
  },
  methods: {
    videoDiscern(url) {
      this.loadding = true
      videoDiscern(url, this.$route.query.token).then(res => {
        this.obj.content = res.data.result.join()
        this.loadding = false
      }).catch(() => {
        this.loadding = false
      })
    },
    handleDeleteVideo(uid) {
      const index = this.obj.imgUrl.findIndex(item => item.uid === uid)
      this.obj.imgUrl.splice(index, 1)
    },
    photograph() {
      this.$emit('photograph')
    },
    handleSubmit(obj, done) {
      this.$emit('submit', obj, done)
    },
    handleWindowPrint() {
      handleWindowPrint('#view_warper', '笔录', this)
    },
    handleOnSuccess(res) {
      if (!res.data.words_result_num) {
        this.$message.warning('无法识别，请上传清晰的证件照片')
      } else {
        const { 姓名: { words: reInquirytorName }, 性别: { words: reInquirytorSex }, 出生: { words: reInquirytorBirth }, 公民身份号码: { words: reInquirytorCardNum }, 住址: { words: reInquirytorAddressOld }} = res.data.words_result
        Object.assign(this.obj, { reInquirytorName, reInquirytorSex, reInquirytorBirth: new Date(reInquirytorBirth.slice(0, 4), reInquirytorBirth.slice(4, 6), reInquirytorBirth.slice(6, 8)), reInquirytorCardNum, reInquirytorAddressOld })
      } this.loadding = false
    },
    generate() {
      this.obj.reInquirytorSignature = this.$refs.sign.submit(80, 32)
      this.dialogVisible = false
      // console.log(this.img)
    }
  }
}
</script>
